<template>
  <div class="address-management-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="1" :tab="`取件地址`"></a-tab-pane>
        <a-tab-pane key="2" :tab="`非FBA收件地址`"></a-tab-pane>
        <template #rightExtra>
          <a-button type="primary" @click="addHandle">新增</a-button>
        </template>
      </a-tabs>
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
        :activeKey="activeKey"
      >
        <template #status="{ row }">
          <a-tag v-if="row.status === 1" color="#87d068"> 启用 </a-tag>
          <a-tag v-if="row.status === 0" color="#cd201f"> 停用 </a-tag>
        </template>
        <template #action="{ row }">
          <a-button type="link" :danger="row.status === 1" @click="changeStatusHandle(row)">{{ row.status === 0 ? "启用" : "停用" }}</a-button>
          <a-button type="link" danger @click="deleteHandle(row)">删除</a-button>
          <a-button type="link" @click="editHandle(row)">编辑</a-button>
        </template>
      </super-table>
    </div>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import AddPickupAddress from "./components/addPickupAddress/index.vue";
import AddNoFbaAddress from "./components/addNoFbaAddress/index.vue";
import { computed } from "vue";
export default {
  name: "ClientAddressManagement",
  components: {
    AddPickupAddress,
    AddNoFbaAddress
  }
};
</script>
<script lang="ts" setup>
import { searchItemList, tableColumnMap } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
const { tableHeight, loading } = TableHeightHook(75);
const { searchForm, tableData, dialogOpts, activeKey } = InitHook();
const tableColumn = computed<Array<SuperTable.TableCoulmnItem | SuperTable.NestTableColumnItem>>(() => {
  return tableColumnMap[activeKey.value] || [];
});
const { searchHandle, changeStatusHandle, addHandle, getData, changeTabHandle, editHandle, deleteHandle } = OperationHook({ searchForm, tableData, dialogOpts, loading, activeKey });
const { dialogSubmitHandle } = ModalHook({
  dialogOpts,
  callBack: getData
});
getData();
</script>
<style lang="stylus" scoped></style>
